<template>
  <div class="phone">
    <header>
      <div class="top" @click="$router.go(-1)"></div>
      <span class="tex_1">登录</span>
      <span class="tex_2" @click="btnReg">手机注册</span>
    </header>

    <main>
      <van-tabs v-model="active">
        <van-tab title="手机号快捷登陆">
          <van-cell-group>
            <van-field
              v-model="phone"
              placeholder="请输入手机号"
              left-icon="https://lanhu.oss-cn-beijing.aliyuncs.com/ps07565bremrm6pe9cw0iqhikfr4rnadgcma0f9ce5c-b568-4ecf-b52f-1f8e35457240"
            />
          </van-cell-group>

          <van-field
            v-model="sms"
            center
            clearable
            placeholder="请输入短信验证码"
            left-icon="https://lanhu.oss-cn-beijing.aliyuncs.com/pszuyg2fnmaziw6dxm4i6alovllpilq935f2d59b5-1c46-4022-813f-b08a7d90feb4"
          >
            <template #button>
              <van-button size="small" type="primary">发送验证码</van-button>
            </template>
          </van-field>

          <p class="text">未注册过的手机将自动创建为美悦用户</p>

          <button class="denglu" @click="toSendCode">登陆</button>

          <div class="agree1">
            <van-checkbox
              v-model="checked"
              checked-color="#f7405f"
              shape="square"
              icon-size="14px"
            ></van-checkbox>
            <div class="text">
              <span class="text1">我同意并愿意遵守</span>
              <span class="text2">《美悦隐私政策》《美悦用户使用协议》</span>
            </div>
          </div>
        </van-tab>

        <van-tab title="账号密码登陆">
          <van-cell-group>
            <van-field
              v-model="phone1"
              placeholder="请输入手机号/邮箱"
              left-icon="https://lanhu.oss-cn-beijing.aliyuncs.com/ps07565bremrm6pe9cw0iqhikfr4rnadgcma0f9ce5c-b568-4ecf-b52f-1f8e35457240"
            />
          </van-cell-group>

          <van-cell-group>
            <van-field
              v-model="phone2"
              placeholder="6到25字符组成的密码"
              left-icon="https://lanhu.oss-cn-beijing.aliyuncs.com/psw18qal9lxj0jru4zfq27i5r9atvd7vzake813a7bb-382f-436c-b8b4-daf81bba3da0"
              right-icon="https://lanhu.oss-cn-beijing.aliyuncs.com/ps7f8aj0d5tigf05hz2xjrnfbhanxa28k9cf3fb203c-e1c4-4df8-85a0-38f624c9ed6b"
            />
          </van-cell-group>

          <button class="denglu" @click="toSendCode1">登陆</button>

          <p class="wangji">忘记密码?</p>
        </van-tab>
      </van-tabs>
    </main>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
import { setToken } from "../../utils/token";
import { LoginAPI } from "../../utils/requestAPI";
export default {
  data() {
    return {
      active: 2,
      checked: false,
      phone: "",
      sms: "",
      phone1: "",
      phone2: "",
    };
  },

  methods: {
    // 跳转注册页面
    btnReg() {
      this.$router.push("/reg");
    },

    // 验证手机号
    checkPhone(phone) {
      let reg = /^1[3|4|5|7|8][0-9]{9}$/;
      return reg.test(phone);
    },

    // 验证邮箱
    checkEmail(email) {
      let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      return reg.test(email);
    },

    // 验证密码
    checkPassword(password) {
      let reg = "/^(?![d]+$)(?![a-zA-Z]+$)(?![^da-zA-Z]+$).{6,20}$/";
      return reg.test(password);
    },

    // 点击验证码
    setCode() {
      // 验证码请求
      axios
        .post("/api/admin/setCode", {
          userPhone: this.phone,
        })
        .then((res) => {
          console.log(res);
        });
    },

    // 手机号登陆
    toSendCode() {
      if (this.checked) {
        if (this.checkPhone(this.phone)) {
          alert("验证成功");
          this.$router.push("/Home");
        } else {
          Toast("请检查您的手机号！");
        }
      } else {
        Toast("请先勾选我同意！");
      }
    },

    // 账号密码登陆
    async toSendCode1() {
      if (this.checkPhone(this.phone1) || this.checkEmail(this.phone1)) {
        // alert("验证成功");
        // 用户登录请求
        await LoginAPI({
          code: this.sms,
          userPhone: this.phone1,
          password: this.phone2,
        }).then((res) => {
          console.log(res);
          let token = res.data.tokenHead + " " + res.data.token;
          setToken(token);
        });
        this.$router.push("/Home");
      } else {
        Toast("请检查您的手机号或邮箱是否正确！");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.phone {
  display: flex;
  flex-direction: column;

  header {
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px #bbb solid;

    .top {
      width: 19px;
      height: 35px;
      background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psfzkjgsrtz3oieijnyyjehngzz3nugwa7w2438a8bb-693e-4558-a4b4-f50f8ddc651b) -1px -1px
        no-repeat;
      background-size: 20px 37px;
      margin-left: 50px;
    }

    .tex_1 {
      color: rgba(112, 112, 112, 1);
      font-size: 32px;
      font-family: PingFangSC-Regular;
      font-weight: 600;
      margin-left: 50px;
    }

    .tex_2 {
      color: rgba(153, 153, 153, 1);
      font-size: 30px;
      font-family: PingFangSC-Regular;
      padding-right: 50px;
    }
  }

  main {
    width: 100%;
    height: 72px;
    .text {
      width: 80%;
      margin: auto;
      color: rgba(153, 153, 153, 1);
      font-size: 26px;
      font-family: PingFangSC-Regular;
    }
    .denglu {
      display: block;
      margin: 20px auto;
      background-color: rgba(247, 64, 95, 0.2);
      border-radius: 10px;
      height: 82px;
      width: 80%;
      color: rgba(254, 254, 254, 1);
      font-size: 30px;
      font-family: PingFangSC-Regular;
      text-align: center;
      border: 1px rgb(112, 107, 107) solid;
    }

    .wangji {
      width: 80%;
      color: rgba(102, 102, 102, 1);
      font-size: 26px;
      font-family: PingFangSC-Regular;
      margin: auto;
      text-align: right;
    }

    .agree1 {
      width: 80%;
      margin: 20px auto;
      display: flex;
      align-items: center;
      .text {
        width: 560px;
        height: 22px;
        font-size: 0;
        font-family: PingFangSC-Regular;
        white-space: nowrap;
        margin-top: -1px;
      }
      .text1 {
        color: rgba(153, 153, 153, 1);
        font-size: 22px;
      }

      .text2 {
        color: rgba(247, 64, 95, 1);
        font-size: 22px;
      }
    }
  }

  // .van-tabs__line {
  //   position: absolute;
  //   bottom: 15px;
  //   left: 0;
  //   z-index: 1;
  //   width: 50%;
  //   height: 100%;
  //   background-color: rgba(112, 112, 112, 0.5);
  //   border-radius: 3px;
  // }

  .van-cell {
    border: 1px #bbb solid;
    margin: 20px auto;
    width: 80%;
    border-radius: 10px;
    height: 40px;
  }

  .van-button--primary {
    background-color: #fff;
    color: #bbb;
    border: 1px #bbb solid;
    border-radius: 10px;
  }
}
</style>